<template>
    <div class="container show-begin">
        <div class="text">
            <span class="ch">
                <span>十</span>
                <span>年</span>
                <span>生</span>
                <span>死</span>
            </span>
            <span class="en">MY LIVE IN TEN YEAR</span>
        </div>
    </div>
</template>

<script>
import { rand } from '@/utils'
export default {
    name:'ShowBegin',
    mounted() {
        let num = 50;
        for(let i=0;i<num;i++){
            const i = document.createElement('i');
            i.style.height = rand(30, 100) + 'px';
            i.style.left = rand(1, 98) + 'vw';
            i.style.animationDuration = rand(5, 30) / 10 + 's'; 
            document.querySelector('.container').appendChild(i);
        }
    },
    
}
</script>

<style lang="less">

.show-begin{
    height:100vh;
    width: 100vw;
    background-image:url(./images/background-image.jpg);
    background-size:cover ;
    display:flex;
    justify-content: center;
    align-items: center;
    .text{
        display: flex;
        flex-direction: column;
        user-select: none;
        .ch{
            font-size:80px ;
        }
        .en{
            text-align: center;
        }
    }
    &>.rocket::after{
        content: "";
        width: 10px;
        height: 150px;
        background: linear-gradient( rgb(40, 158, 194), transparent);
        position:absolute;
        left: 50%;
        transform:translateX(-50%);
        bottom:-150px;
    }
    &>i{
        width:1px;
        height:20px; /* 30 - 100*/
        position:absolute;
        left: 20px;  /*1 - 99vw*/
        top: 0px;  
        background: #fff;
        animation: line 2s linear infinite;
    }

    @keyframes line{
        from{
            transform: translateY(0);
        }
        to{
            transform: translateY(80vh);
        }
    }

}







</style>